<template>
  <div class="MyDevice">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="设备编号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['facilityNumber']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="所属点位" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['belongPoint']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="所属网点" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select v-decorator="['belongBranch']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="item in branchName"
                  :key="item.id"
                  :value="item.id"
                >{{item.branchName}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="是否在线" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select v-decorator="['isOnline']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">在线</a-select-option>
                <a-select-option :value="0">离线</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="绑定状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select v-decorator="['bindingState']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">已绑定</a-select-option>
                <a-select-option :value="0">未绑定</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button type="dashed" @click="listExport">导出</a-button>
            <a-button @click="handleReset()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.devId"
        :bordered="true"
      >
        <template slot="isSake" slot-scope="text,record">
          <div class="blue" @click="goodsModal(text,record)">{{record.goodsTemplateName}}</div>
          <div>{{record.goodsTemplateName==null?'无':record.goodsTemplateStatus==1?"待生效":record.goodsTemplateStatus==2?"生效":"失效"}}</div>
        </template>
        <template slot="isOnline" slot-scope="text,record">
          <span>{{record.isOnline==0?"离线":"在线"}}</span>
        </template>
        <template slot="bindingState" slot-scope="text,record">
          <span>{{record.isBindingPos==0?"未绑定":"已绑定"}}</span>
        </template>
        <template slot="operation" slot-scope="text,record">
          <div class="blue" @click="templateModal(text,record)">模板管理</div>
          <div
            :class="record.repairStatus==null?'repairs':'pending'"
            @click="record.repairStatus==null?repairsModal(record):''"
          >{{record.repairStatus==null?"报修":"待处理"}}</div>
        </template>
      </a-table>
    </a-card>
    <a-modal
      :title="goodsTitle"
      :visible="goodsVisible"
      @ok="goodsOk"
      @cancel="goodsCancel"
      :footer="null"
      :width="700"
    >
      <a-table
        :columns="columnsGoods"
        :dataSource="dataGoods"
        :pagination="false"
        :rowKey="record => record.id"
        :bordered="true"
      >
        <template slot="number" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      title="模板管理"
      :visible="templateVisible"
      @ok="templateOk"
      @cancel="templateCancel"
      :width="700"
      okText="重新绑定"
    >
      <p>已绑定的商品模板：{{bindingTemplate}}</p>
      <p class="blue" v-show="isRebinding" @click="Rebinding">重新绑定模板</p>
      <div v-show="isDiv">
        <a-form :form="form">
          <a-row :gutter="20">
            <a-col :span="10">
              <a-form-item
                label="模板名称"
                :label-col="{ span: 7}"
                :wrapper-col="{ span: 16, offset: 1}"
              >
                <a-input placeholder="请输入" v-decorator="['templateName']" />
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <a-form-item
                label="模板编号"
                :label-col="{ span: 7}"
                :wrapper-col="{ span: 16, offset: 1}"
              >
                <a-input placeholder="请输入" v-decorator="['templateNumber']" />
              </a-form-item>
            </a-col>
            <a-col :span="4" style="textAlign:right">
              <a-button type="primary" style="margin-top:3%" @click="findPageListByCondition()">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
        <a-table
          :columns="columnsTemplate"
          :dataSource="dataTemplate"
          :pagination="paginationTemplate"
          @change="TableTemplate"
          :rowKey="record => record.id"
          :bordered="true"
          :rowSelection="{selectedRowKeys: selectedKeys,onChange: onSelectChange,type:'radio',columnTitle:'选择'}"
        ></a-table>
      </div>
    </a-modal>
    <a-modal
      title="报修"
      :visible="repairsVisible"
      @ok="repairsOk"
      @cancel="repairsCancel"
      okText="确定报修"
      :width="700"
    >
      <a-form :form="form">
        <a-form-item
          style="margin:0;"
          label="设备编号"
          :label-col="{ span: 4}"
          :wrapper-col="{ span: 16, offset: 1}"
        >
          <span>{{facilityId}}</span>
        </a-form-item>
        <a-form-item
          style="margin:0;"
          label="点位名称"
          :label-col="{ span: 4}"
          :wrapper-col="{ span: 12, offset: 1}"
        >
          <span>{{pointNam}}</span>
        </a-form-item>
        <a-form-item
          style="margin:0;"
          label="点位地址"
          :label-col="{ span: 4}"
          :wrapper-col="{ span: 16, offset: 1}"
        >
          <span>{{pointAddres}}</span>
        </a-form-item>
        <a-form-item label="问题模板" :label-col="{ span: 4 }" :wrapper-col="{ span: 16,offset:1 }">
          <a-select
            style="width:100%"
            v-decorator="[
          'issueTemplate',
          {rules: [{ required: true, message: '请选择问题模板!' }]}
        ]"
            placeholder="全部"
          >
            <a-select-option value="1">相机模块</a-select-option>
            <a-select-option value="2">门锁模式</a-select-option>
            <a-select-option value="3">网络模块</a-select-option>
            <a-select-option value="4">其他模块</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="问题描述" :label-col="{ span: 4 }" :wrapper-col="{ span: 16,offset:1 }">
          <a-textarea
            v-decorator="[
          'issueDescribe',
          {rules: [{ required: true, message: '请输入问题描述!' }]}
        ]"
            placeholder="请输入"
            :autosize="{ minRows: 5, maxRows: 8 }"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "ID",
    dataIndex: "devId",
    scopedSlots: { customRender: "ID" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "devCode",
    scopedSlots: { customRender: "facilityName" },
    align: "center"
  },
  {
    title: "所属点位",
    dataIndex: "posName",
    scopedSlots: { customRender: "belongBranch" },
    align: "center"
  },
  {
    title: "点位地址",
    dataIndex: "posAddress",
    scopedSlots: { customRender: "pointSite" },
    align: "center"
  },
  {
    title: "商品模板/是否生效",
    dataIndex: "goodsTemplateStatus",
    scopedSlots: { customRender: "isSake" },
    align: "center"
  },
  {
    title: "是否在线",
    dataIndex: "isOnline",
    scopedSlots: { customRender: "isOnline" },
    align: "center"
  },
  {
    title: "绑定状态",
    dataIndex: "isBindingPos",
    scopedSlots: { customRender: "bindingState" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

const columnsTemplate = [
  {
    title: "模板编号",
    dataIndex: "templateCode",
    scopedSlots: { customRender: "templateNumber" },
    align: "center"
  },
  {
    title: "模板名称",
    dataIndex: "name",
    scopedSlots: { customRender: "templateName" },
    align: "center"
  }
];

const columnsGoods = [
  {
    title: "序号",
    dataIndex: "number",
    scopedSlots: { customRender: "number" },
    align: "center"
  },
  {
    title: "商品编码",
    dataIndex: "code",
    scopedSlots: { customRender: "goodsNumber" },
    align: "center"
  },
  {
    title: "商品名称",
    dataIndex: "name",
    scopedSlots: { customRender: "goodsName" },
    align: "center"
  },
  {
    title: "商品简称",
    dataIndex: "goodsShort",
    scopedSlots: { customRender: "goodsShort" },
    align: "center"
  }
];

const dataTemplate = [
  {
    key: 1
  }
];

const dataGoods = [
  {
    key: 1
  }
];

export default {
  name: "MyDevice",
  data() {
    return {
      form: this.$form.createForm(this),
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      paginationTemplate: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      templateVisible: false,
      isRebinding: true,
      columnsTemplate,
      dataTemplate: [],
      isDiv: false,
      repairsVisible: false,
      goodsVisible: false,
      columnsGoods,
      dataGoods: [],
      facilityId: "",
      pointNam: "",
      pointAddres: "",
      bindingTemplate: "",
      selectedKeys: [],
      goodsTitle: "",
      branchName: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleReset() {
      this.form.resetFields();
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedKeys = selectedRowKeys;
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.handleReset();
      this.search();
    },
    TableTemplate(pagination, filters, sorter) {
      const pager = { ...this.paginationTemplate };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.paginationTemplate = pager;
      this.handleReset();
      this.findPageListByCondition();
    },

    goodsModal(text, record) {
      this.goodsVisible = true;
      this.findGoodsTemplateDetailList(record.goodsTemplateId);
      this.goodsTitle = record.goodsTemplateName + "-商品列表";
    },
    goodsOk(e) {
      this.goodsVisible = false;
    },
    goodsCancel(e) {
      this.goodsVisible = false;
    },

    templateModal(text, record) {
      this.templateVisible = true;
      this.bindingTemplate = record.goodsTemplateName;
      this.devCode = record.devCode;
      this.deviceAgentId = record.deviceAgentId;
      this.goodsTemplateId = record.goodsTemplateId;
      this.findPageListByCondition();
    },
    templateOk(e) {
      this.templateVisible = false;
      this.bindTemplate();
    },
    templateCancel(e) {
      console.log("点击取消了");
      this.templateVisible = false;
    },

    repairsModal(record) {
      this.repairsVisible = true;
      this.facilityId = record.devCode;
      this.pointNam = record.posName;
      this.pointAddres = record.posAddress;
      this.record = record;
    },
    repairsOk(e) {
      // this.add();
      this.repairsVisible = false;
      this.repair(this.record);
    },
    repairsCancel(e) {
      console.log("点击取消了");
      this.repairsVisible = false;
    },
    showDeleteConfirm(text, record) {
      var that = this;
      this.delId = record.employeeId;
      this.$confirm({
        title: "删除巡柜员",
        content: "您确定要删除这个巡柜员吗？",
        okText: "确定",
        cancelText: "取消",
        iconType: "close-circle",
        onOk() {
          that.delete(that.delId);
          console.log("OK");
        },
        onCancel() {
          console.log("Cancel");
        }
      });
    },
    Rebinding() {
      this.isRebinding = false;
      this.isfooter = false;
      this.isDiv = true;
    },

    // 点位初始化
    listInit() {
      this.axios
        .post(this.baseUrl + "/pos/listInit", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          console.log(response);
          this.branchName = response.data.data.branchName;
        });
    },

    // 代理商设备搜索
    search() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/device/search", {
          loginToken: this.$store.state.loginToken,
          branchesId: values.belongBranch,
          devCode: values.facilityNumber,
          isBindingPos: values.bindingState,
          isOnline: values.isOnline,
          posName: values.belongPoint,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 报修
    repair(record) {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/device/repair", {
          loginToken: this.$store.state.loginToken,
          devCode: record.devCode,
          deviceAgentId: record.deviceAgentId,
          posId: record.posId,
          failureModule: values.issueTemplate,
          description: values.issueDescribe
        })
        .then(response => {
          // console.log(response);
          if (response.data.code == 0) {
            this.$message.info("报修成功");
            this.search();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 绑定模板
    bindTemplate() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/device/bindTemplate", {
          loginToken: this.$store.state.loginToken,
          devCode: this.devCode,
          deviceAgentId: this.deviceAgentId,
          goodsTemplateId: this.selectedKeys[0]
        })
        .then(response => {
          // console.log(response);
          if (response.data.code == 0) {
            this.$message.info("绑定模板成功");
            this.search();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 代理商设备导出
    listExport() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/device/export",
          {
            loginToken: this.$store.state.loginToken,
            branchesId: values.belongBranch,
            devCode: values.facilityNumber,
            isBindingPos: values.bindingState,
            isOnline: values.isOnline,
            posName: values.belongPoint
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "代理商设备表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 查询商品模板列表
    findPageListByCondition() {
      var values = this.form.getFieldsValue();
      console.log(values);
      this.axios
        .post(this.baseUrl + "/goodsTemplate/findPageListByCondition", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.paginationTemplate.current,
          pageSize: this.paginationTemplate.pageSize,
          name: values.templateName,
          templateCode: values.templateNumber
        })
        .then(response => {
          // console.log(response);
          this.dataTemplate = response.data.data.list;
          this.paginationTemplate.total = response.data.data.total;
          this.paginationTemplate.pageSize = response.data.data.pageSize;
          this.paginationTemplate.current = response.data.data.pageNum;
        });
    },

    // 查询商品模板明细列表
    findGoodsTemplateDetailList(goodsTemplateId) {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/goodsTemplate/findGoodsTemplateDetailList", {
          loginToken: this.$store.state.loginToken,
          goodsTemplateId: goodsTemplateId
        })
        .then(response => {
          // console.log(response);
          this.dataGoods = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    this.listInit();
    this.search();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.MyDevice {
  width: 100%;
}
.ant-btn-primary,
.ant-btn-dashed {
  margin-right: 10px;
}
.repairs {
  color: rgb(255, 166, 19);
  cursor: pointer;
}
.pending {
  color: rgb(203, 179, 203);
}
</style>
